<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visualize Data</title>
        <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
            color: #333;
        }
        .form-container {
            padding: 10px;
            margin-top: 10px;
            display: flex;        /* 使用Flexbox布局 */
            justify-content: space-around; /* 元素均匀分布 */
            align-items: center;  /* 垂直居中 */
            flex-wrap: wrap; /* Allows form fields to wrap */
            gap: 10px; /* Space between elements */
            margin-bottom: 8px;
        }
        .title {
            margin-top: 10px;
            display: flex;        /* 使用Flexbox布局 */
            justify-content: space-around; /* 元素均匀分布 */
            align-items: center;  /* 垂直居中 */
            flex-wrap: wrap; /* Allows form fields to wrap */
            gap: 10px; /* Space between elements */
            margin-bottom: 8px;
            font-size: 20px;
        }
        .bottom_chart_left {
            background: white;
            padding: 10px;
            margin-top: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            flex-wrap: wrap; /* Allows form fields to wrap */
            align-items: center; /* Align items vertically in the center */
            gap: 10px; /* Space between elements */
            width: 40%;
            float: left;
            transform: translateX(50px);
        }
        .flex-container {
            background: white;
            padding: 10px;
            margin-top: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            margin-bottom: 8px;
        }
        .bottom_chart_right {
            background: white;
            padding: 10px;
            margin-top: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            flex-wrap: wrap; /* Allows form fields to wrap */
            align-items: center; /* Align items vertically in the center */
            gap: 10px; /* Space between elements */
            width: 40%;
            float: right;
            transform: translateX(-50px);
        }
        input, select{
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #5cb85c;
            color: white;
            border: none;
            cursor: pointer;
            padding: 5px 15px;
            margin-bottom: 8px;
        }
        button:hover {
            background-color: #046113;
        }
        label {
            margin-right: 5px; /* Space between label and input */
        }
        /* body{
            background-image: url('/static/images/background1.webp'); /* 替换成图片路径
            background-size: cover; /* 图片自适应覆盖整个页面 
            background-repeat: no-repeat; /* 不重复 
            background-position: center center; /* 居中对齐 
        }*/
    </style>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>


<body>
    <div class="title">
        <h3 align="center">售价预测模块</h3>
    </div>

    
    <div class= flex-container>
        <div class="title" style="font-size: 15px; justify-content: left">
            <label for="modelSelect">选择模型:</label>
            <select id="modelSelect" onchange="toggleForms()">
            <option value="null">请选择一个模型</option>
            <option value="arima">ARIMA</option>
            <option value="lightgbm">LightGBM</option>
            <option value="arima">随机森林</option>
            <option value="arima">LSTM</option>
            <option value="lightgbm">LSTM-Transformer复合模型</option>
            <option value="arima">GARCH</option>
            <option value="lightgbm">Prophet</option>
            </select>
        </div>
        <div class="form-container" id="arimaForm" style="display: none;">
            <h3 align="center">ARIMA 模型参数设置</h3>
            <div align="center">
                <input type="number" id="p" name="自回归系数" step="0.01" placeholder="输入自回归系数" required>
                <input type="number" id="q" name="滑动平均项数" step="0.01" placeholder="输入滑动平均项" required>
                <input type="number" id="d" name="差分阶数" step="0.01" placeholder="输入差分阶数" required>
                <input type="number" id="steps" name="未来预测步数" step="1" placeholder="输入未来预测步数" required>
                <button type="button" onclick="submitArimaParams()">提交参数</button>
            </div>
        </div>
    
        <div class="form-container" id="lightGBMForm" style="display: none;">
            <h3 align="center">LightGBM 模型参数设置</h3>
            <div align="center">
                <select id="boosting_type" name="boosting_type" placeholder="增强方法" required>
                    <option value="">增强方法</option>
                    <option value="gbdt">GBDT</option>
                    <option value="dart">DART</option>
                    <option value="goss">GOSS</option>
                </select>
    
                <input type="number" id="learning_rate" name="学习率" step="0.01" placeholder="学习率" required>
                <input type="number" id="feature_fraction" name="特征抽样率" step="0.01" placeholder="特征抽样率" required>
                <input type="number" id="bagging_fraction" name="子采样率" step="0.01" placeholder="子采样率" required>
                <button type="button" onclick="submitLightGBMParams()">提交参数</button>
    
            </div>
        </div>
    </div>

    <button onclick="fetchData()">显示预测结果</button>
    <button onclick="showbottom()">参数辅助选择</button>
    <button onclick="clearData()">清除预测结果</button>

    <script>
        function showbottom() {
            compareq();
            comparep();
            showdivp();
            showdivq();
        }
    </script>

    <script>
        function showdivq() {
            var div = document.getElementById('aic_chartp');
            div.style.display = 'block';  // 更改为显示
        }
    </script>

    <script>
        function showdivp() {
            var div = document.getElementById('aic_chartq');
            div.style.display = 'block';  // 更改为显示
        }
    </script>

    <div id="chart"></div>

    <div class="bottom_chart_left" id="aic_chartp" style="display: none;"></div>

    <div class="bottom_chart_right" id="aic_chartq" style="display: none;"></div>

    <script>
    function toggleForms() {
        var selection = document.getElementById("modelSelect").value;
        if(selection === "del")
            delchat();
        document.getElementById("arimaForm").style.display = (selection === "arima") ? "block" : "none";
        document.getElementById("lightGBMForm").style.display = (selection === "lightgbm") ? "block" : "none";
    }
    </script>

    <script>
    function submitArimaParams() {
        const p = document.getElementById('p').value;
        const d = document.getElementById('d').value;
        const q = document.getElementById('q').value;
        const steps = document.getElementById('steps').value;
        fetch('/run_arima', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ p: p, d: d, q: q, steps: steps })
        })
        .then(response => response.text())
        .then(data => {
            alert(data);
        })
        .catch(error => console.error('Error:', error));
    }

    function submitLightGBMParams() {
        const boosting_type = document.getElementById('boosting_type').value;
        const learning_rate = document.getElementById('learning_rate').value;
        const feature_fraction = document.getElementById('feature_fraction').value;
        const bagging_fraction = document.getElementById('bagging_fraction').value;
        fetch('/run_lightGBM', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({boosting_type: boosting_type, learning_rate: learning_rate, feature_fraction: feature_fraction, bagging_fraction: bagging_fraction})
        })
        .then(response => response.text())
        .then(data => alert(data))
        .catch(error => console.error('Error:', error));
    }
    </script>

    <script>
    function fetchData() {
        fetch('/process_data')
            .then(response => response.json())
            .then(data => {
                // 定义额外的布局设置
                const additionalLayout = {
                    xaxis: {
                        title: '日期（day）', // X轴标题
                    },
                    yaxis: {
                        gridwidth: 2,
                        title: '销售额（万元）', // Y轴标题
                    },
                    // xaxis_title_font: {
                    //     family: "Arial, sans-serif", 
                    //     size: 18,                 
                    //     color: "green"             
                    // },
                    // yaxis_title_font: {
                    //     family: "Arial, sans-serif", 
                    //     size: 18,                 
                    //     color: "green"             
                    // },
                    // paper_bgcolor: 'rgba(0,0,0,0)', 
                    // plot_bgcolor:'rgba(0,0,0,0)',
                };
                // 合并从后端接收的布局与额外布局设置
                const finalLayout = Object.assign({}, data.graph_json.layout, additionalLayout);
                Plotly.newPlot('chart', data.graph_json.data, finalLayout);
            })
            .catch(error => console.error('Error fetching data:', error));
    }
    </script>

    <script>
    function delchat(){
        Plotly.purge('chart');
    }
    </script>

    <script>
    function clearData() {
        fetch('/clear', {
            method: 'POST'
        })
        .then(response => response.text())
        .then(data => alert('Forecast data cleared!'))
        .catch(error => console.error('Error clearing data:', error));
    }
    </script>

    <script>
    function comparep() { 
        fetch('/a')
            .then(response => response.json())
            .then(data => {
                const xMin = data['xmin'];
                const xMax = data['xmax'];
                const yMin = data['ymin'];
                const yMax = data['ymax'];
                var trace = [data];  // 数据数组
                var layout = {
                    title: '自回归系数对模型性能影响',  // 图表标题
                    xaxis: { title: 'p',  range: [xMin, xMax], tickmode: 'linear', dtick: 1},
                    yaxis: { title: 'AIC', range: [yMin, yMax]},
                    bargap: 0.1,
                    bargroupgap: 0.5
                };
                Plotly.newPlot('aic_chartp', trace, layout);
                const y1Max = data['ymax'];
            })
            .catch(error => console.error('Error fetching data:', error));
    }
    </script>

<script>
    function compareq() { 
        fetch('/b')
            .then(response => response.json())
            .then(data => {
                const xMin = data['xmin'];
                const xMax = data['xmax'];
                const yMin = data['ymin'];
                const yMax = data['ymax'];
                var trace = [data];  // 数据数组
                var layout = {
                    title: '滑动平均项数对模型性能影响',  // 图表标题
                    xaxis: { title: 'q',  range: [xMin, xMax], tickmode: 'linear', dtick: 1},
                    yaxis: { title: 'AIC', range: [yMin, yMax]},
                    bargap: 0.1,
                    bargroupgap: 0.5
                };
                Plotly.newPlot('aic_chartq', trace, layout);
            })
            .catch(error => console.error('Error fetching data:', error));
    }
    </script>

    <script>
    function delchat(){
        Plotly.purge('chart');
    }
    </script>

</body>
</html>
